<template>
  <div>
    <el-row class="info">
      <ms-card>
        <login-info :loading="loading" />
      </ms-card>
    </el-row>
    <el-row :gutter="20">
      <ms-card title="全年数据" :col=12>
        <ms-skeleton active :paragraph="6" :is-loading="loading" >
          <ms-line :linedata="linedata" height="300px"/>
        </ms-skeleton>
      </ms-card>
      <ms-card title="本周计划" :col=12>
        <ms-skeleton active :paragraph="4" :is-loading="loading" >
          <el-calendar :range="value"/>
        </ms-skeleton>
      </ms-card>
    </el-row>
  </div>
</template>

<script>
import { MsLine } from '@/common/echarts'
import MsCard from '@/common/card/components'
import LoginInfo from './LoginInfo'
import { getDays } from '@/utils/date'
import MsSkeleton from '@/common/skeleton/components'
export default {
  name: 'Home',
  components: {
    MsLine,
    MsCard,
    LoginInfo,
    MsSkeleton
  },
  data() {
    return {
      linedata: {
        dataMain: ['一月', '二月', '三月', '四月', '五月', '六月', '七月'],
        dataValue: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
      },
      value: getDays(),
      loading: false
    }
  },
  mounted() {
    setTimeout(() => {
      this.loading = true
    }, 2000)
  }
}
</script>

<style lang="stylus">
  .el-calendar-day
    display flex
    justify-content center
    align-items center
  .info
    margin-bottom .5rem
</style>
